<template>
  <div class="page">
    <h2>空瓶回收确认</h2>

    <div class="controls">
      <el-input v-model="q" placeholder="按患者/记录ID/药品搜索" clearable style="flex:1" @clear="onClear" />
      <el-select v-model="filterStatus" placeholder="全部状态" style="width:160px">
        <el-option label="全部" :value="''" />
        <el-option label="待确认" value="pending" />
        <el-option label="已确认" value="confirmed" />
      </el-select>
      <div style="display:flex;gap:8px">
        <el-button @click="exportCSV">导出CSV</el-button>
      </div>
    </div>

    <div class="muted">说明：空瓶回收可用于核验实际用量与处方一致性。实际系统应结合条码/扫码与照片上传功能，并保留链路证明。</div>

    <el-table :data="filtered" stripe border style="width:100%;margin-top:12px">
      <el-table-column prop="recordId" label="回收ID" width="120" />
      <el-table-column prop="patientName" label="患者" width="140" />
      <el-table-column prop="drug" label="药品/规格" />
      <el-table-column prop="returnedQty" label="回收数量" width="120" />
      <el-table-column prop="collectedBy" label="回收人" width="140" />
      <el-table-column prop="date" label="回收时间" width="180" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.status==='confirmed'?'success':'info'">{{ row.status==='confirmed' ? '已确认' : '待确认' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230">
        <template #default="{ row }">
          <el-button size="small" @click="view(row.recordId)">查看</el-button>
          <el-button size="small" type="primary" @click="confirmReturn(row.recordId)" v-if="row.status==='pending'" style="margin-left:8px">确认</el-button>
          <el-button size="small" @click="uploadProof(row.recordId)" style="margin-left:8px">上传凭证</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top:8px;display:flex;gap:8px;align-items:center">
      <div style="flex:1"></div>
      <div class="muted">共 {{ filtered.length }} 条回收记录</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const q = ref('');
const filterStatus = ref('');
const data = ref([]);

const DEFAULT = [
  { recordId:'E-3001', patientName:'张三', drug:'劳拉西泮片 0.5mg', returnedQty:2, collectedBy:'护士 李丽', date:'2025-10-22 10:15', status:'pending' },
  { recordId:'E-3002', patientName:'王五', drug:'氟哌啶醇注射液 5mg', returnedQty:1, collectedBy:'护士 王强', date:'2025-10-21 16:40', status:'confirmed' }
];

onMounted(()=>{ data.value = JSON.parse(JSON.stringify(DEFAULT)); });

const filtered = computed(()=>{
  const qq = q.value.trim().toLowerCase();
  return data.value.filter(r=>{
    if(qq && !(r.patientName.toLowerCase().includes(qq) || r.recordId.toLowerCase().includes(qq) || r.drug.toLowerCase().includes(qq))) return false;
    if(filterStatus.value && r.status !== filterStatus.value) return false;
    return true;
  });
});

function view(id){ const it = data.value.find(x=>x.recordId===id); if(it) ElMessage.info(JSON.stringify(it)); }
function confirmReturn(id){ const it = data.value.find(x=>x.recordId===id); if(!it) return; ElMessageBox.confirm('确认该空瓶回收？','确认回收',{confirmButtonText:'确认',cancelButtonText:'取消',type:'warning'})
  .then(()=>{ it.status='confirmed'; ElMessage.success('回收已确认（演示）'); })
  .catch(()=>{});
}
function uploadProof(id){ ElMessage.info('上传凭证功能为演示：请选择文件并上传（实际系统需实现文件存储）'); }
function exportCSV(){ const rows = [['recordId','patientName','drug','returnedQty','collectedBy','date','status'], ...data.value.map(r=>[r.recordId,r.patientName,r.drug,r.returnedQty,r.collectedBy,r.date,r.status])]; const txt = rows.map(r=>r.map(c=>`"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n'); const blob = new Blob([txt],{type:'text/csv'}); const url = URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download='empty_bottle_returns.csv'; a.click(); URL.revokeObjectURL(url); }
function onClear(){}
</script>

<style scoped>
.page{font-family: Arial, "Microsoft YaHei", sans-serif; margin:10px;}
h2{margin-top:-10px}
.controls{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.muted{color:#666;font-size:13px}
</style>